<html>
    <head>
        <meta charset="utf-8">
        <meta name="referrer" content="always">
        <meta http-equiv="content-type" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
        <title>
            js调用java
        </title>
        <style>
            .border-1{
                width:100%;
                border:1px dashed #F00
            }
        </style>
    </head>

    <body>
        <div>
            <p id="show" class="border-1" ></p>
            <p id="log" ></p>
        </div>
        <p>
            <label>用户名:</label>
            <input type="text" id="text1" value="王晓辉" />
        </p>
        <p>
            <label>密&#12288;码:</label>
            <input type="password" id="text2" value="123456" />
        </p>
        <p>
            <input type="button" id="enter" value="发消息给Native" onclick="testSend();" />
        </p>
        <p>
            <button id="enter1" onclick="testSubmitFromWeb();" >调用Native方法</button>
        </p>
        <p>
            <button id="enter2" onclick="testDiv();" >显示html</button>
        </p>
        <p>
            <button id="enter3" onclick="testPlatformInfo();" >获取手机信息</button>
        </p>
        <p>
            <label>选择文件</label><br>
            <input type="file" id="filesId" title="打开文件" />
        </p>
        <p>
            <label>选择图片</label><br>
            <input type="file" id="filesId2" accept="image/*" multiple="multiple" >
        </p>
    </body>
    <script>
        function testPlatformInfo() {
            //call native method
            window.WebViewJavascriptBridge.callHandler(
                'platformInfo'
                , null
                , function(responseData) {
                    var data = JSON.parse(responseData);
                    document.getElementById("show").innerHTML = "获取手机信息：" + responseData;
                }
            );
        }

        function testDiv() {
            document.getElementById("show").innerHTML = document.getElementsByTagName("head")[0].innerHTML;
        }

        function testSend() {
            var str1 = document.getElementById("text1").value;
            var str2 = document.getElementById("text2").value;

            //send message to native
            var data = {id: 1, content: "这是一个图片 <img src=\"a.png\"/> test"};
            data.username = str1;
            data.password = str2;
            window.WebViewJavascriptBridge.send(
                data
                , function(responseData) {
                    document.getElementById("show").innerHTML = "repsonseData from java, data = " + responseData
                }
            );

        }

        function testSubmitFromWeb() {
            var str1 = document.getElementById("text1").value;
            var str2 = document.getElementById("text2").value;

            //call native method
            window.WebViewJavascriptBridge.callHandler(
                'submitFromWeb'
                , {'param': '中文测试'}
                , function(responseData) {
                    document.getElementById("show").innerHTML = "send get responseData from java, data = " + responseData
                }
            );
        }

        function bridgeLog(logContent) {
            document.getElementById("log").innerHTML = logContent;
        }

        function connectWebViewJavascriptBridge(callback) {
            if (window.WebViewJavascriptBridge) {
                callback(WebViewJavascriptBridge)
            } else {
                document.addEventListener(
                    'WebViewJavascriptBridgeReady'
                    , function() {
                        callback(WebViewJavascriptBridge)
                    },
                    false
                );
            }
        }

        connectWebViewJavascriptBridge(function(bridge) {
            bridge.init(function(message, responseCallback) {
                console.log('JS got a message', message);
                var data = {
                    'Javascript Responds': '测试中文!'
                };
                console.log('JS responding with', data);
                responseCallback(data);
            });

            bridge.registerHandler("functionInJs", function(data, responseCallback) {
                document.getElementById("show").innerHTML = ("data from Java: = " + data);
                var responseData = "Javascript Says Right back aka!";
                responseCallback(responseData);
            });

            bridge.registerHandler("getWebInput", function(data, responseCallback) {
                document.getElementById("show").innerHTML = ("data from Java: = " + data);
                var str1 = document.getElementById("text1").value;
                var str2 = document.getElementById("text2").value;
                var responseData = {id: 1, desc: "用户信息"};
                responseData.username = str1;
                responseData.password = str2;
                responseCallback(responseData);
            });
        })
    </script>

</html>